<template>
  <FrontSideTreeTable
    treeDataUrl="/sys/address/getList"
    tableDataUrl="/sys/address/getList"
    addUrl="/sys/address/add"
    editUrl="/sys/address/edit"
    deleteUrl="/sys/address/delete"
    treeTitle="地址"
    :tableTitle="selectedNode.name+'地址列表'"
    :columns="columns"
    searchHint="根据地名查找"
    :searchProps="searchProps"
    :form="form"
    :rules="rules"
    @onNodeClick="handleNodeClick"
    @onTableCreated="handleTableCreated"
    @beforeAdd="beforeAdd"
    @beforeEdit="beforeEdit"
    @onUpdate="handleUpdate">
    <!--表单-->
    <template slot="form">
      <el-form-item label="上一级">
        <el-select v-model="form.parentId" style="width: 100%" placeholder="请选择上一级，输入文字可搜索" clearable>
          <el-option v-for="item of dataList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地名" prop="name">
        <el-input v-model="form.name" placeholder="请输入地名"></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input type="number" v-model.number="form.longitude" placeholder="请输入经度"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input type="number" v-model.number="form.latitude" placeholder="请输入纬度"></el-input>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="请输入地址顺序号"></el-input>
      </el-form-item>
    </template>
  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {intValidator} from "../../../assets/js/utils/ValidateUtils"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"

  //用于重复校验
  let oldName="";

  export default {
    name:"AddressManagement",
    data() {
      //名称重复校验
      let nameValidator = (rule, value, callback)=>{
        if(value === oldName) {
            callback();
        } else {
            if(this.dataList.some(item=>item.name === value && item.parentId === this.form.parentId)) {
                callback(new Error("地址名称重复"));
            } else {
                callback();
            }
        }
      };

      return {
        dataList:[],
        form:{
          parentId:"",
          name:"",
          fullName:""
        },
        columns:[
          {prop:"sortNo", label:"顺序号", width:"100", sortable:"custom"},
          {prop:"name", label:"地名"},
          {prop:"longitude", label:"经度"},
          {prop:"latitude", label:"纬度"}
        ],
        searchProps:["name"],
        rules:{
          name:[
            {required:true, message:"请输入地名", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        },
        selectedNode:{name:""}
      }
    },
    methods:{
      handleNodeClick(data) {
        this.selectedNode = data;
      },
      handleTableCreated(dataList) {
        this.dataList = dataList;
      },
      beforeAdd() {
        oldName = "";
        clearFields(this.form);
        this.form = {parentId:this.selectedNode.id, name:"", fullName:""};
      },
      beforeEdit(data) {
        oldName = data.name;
        this.form = {...data};
      },
      handleUpdate(form) {
        let parent = this.dataList.find(item=>item.id === form.parentId);
        if(!!parent && parent.fullName) form.fullName = parent.fullName + "/" + form.name;
        else form.fullName = form.name;
      }
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// AddressManagement.vue?2d8ff6ca